<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>厕位详情</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="js/toast.js"></script>
    <style>
        /* 基础样式 */
        body {
            margin: 0;
            padding: 0;
            background: #f5f5f5;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        /* 页头 */
        .header {
            padding: 15px;
            background: white;
            display: flex;
            align-items: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .back-btn {
            font-size: 20px;
            margin-right: 15px;
            cursor: pointer;
            color: #666;
        }

        .header h1 {
            margin: 0;
            font-size: 18px;
            font-weight: normal;
        }

        /* 信息卡片 */
        .info-card {
            margin: 15px;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .info-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #eee;
        }

        .info-item:last-child {
            border-bottom: none;
        }

        .info-label {
            color: #666;
        }

        .info-value {
            color: #333;
        }

        /* 状态标签 */
        .status-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 13px;
        }

        .status-empty {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .status-occupied {
            background: #fff3e0;
            color: #ef6c00;
        }

        .status-fault {
            background: #ffebee;
            color: #c62828;
        }

        .status-maintenance {
            background: #e3f2fd;
            color: #1565c0;
        }

        .status-smoke {
            background: #fafafa;
            color: #424242;
        }

        /* 管理员面板样式 */
        .admin-panel {
            margin-bottom: 20px;
        }

        .admin-title {
            margin: 0 0 15px 0;
            font-size: 16px;
            color: #333;
        }

        .admin-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #eee;
        }

        .admin-item:last-child {
            border-bottom: none;
        }

        .admin-label {
            color: #666;
        }

        /* 性别切换按钮 */
        .gender-switch {
            display: flex;
            gap: 10px;
        }

        .gender-btn {
            padding: 6px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: white;
            color: #666;
            cursor: pointer;
            transition: all 0.3s;
        }

        .gender-btn.active {
            border-color: transparent;
        }

        .gender-btn.male.active {
            background: #2196F3;
            color: white;
        }

        .gender-btn.female.active {
            background: #E91E63;
            color: white;
        }

        /* 启用/禁用开关 */
        .toggle-switch {
            position: relative;
            display: inline-flex;
            align-items: center;
            cursor: pointer;
        }

        .toggle-switch input {
            display: none;
        }

        .toggle-slider {
            position: relative;
            width: 48px;
            height: 24px;
            background-color: #ccc;
            border-radius: 12px;
            transition: .4s;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            border-radius: 50%;
            transition: .4s;
        }

        input:checked + .toggle-slider {
            background-color: #4CAF50;
        }

        input:checked + .toggle-slider:before {
            transform: translateX(24px);
        }

        .toggle-label {
            margin-left: 8px;
            color: #666;
        }

        /* 快捷操作按钮样式 */
        .quick-actions {
            display: flex;
            gap: 10px;
        }

        .action-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            transition: all 0.3s;
        }

        .action-btn i {
            font-size: 14px;
        }

        .action-btn.emergency {
            background: #f44336;
        }

        .action-btn.repair {
            background: #4caf50;
        }

        .action-btn:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .action-btn:active {
            transform: translateY(0);
        }

        /* 紧急求助按钮样式 */
        .emergency-help.info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #eee;
        }

        .emergency-help .info-label {
            color: #666;
        }

        .emergency-help .info-value {
            display: flex;
            align-items: center;
        }

        .help-btn {
            padding: 6px 12px;
            background: #f44336;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: all 0.3s;
        }

        .help-btn:hover {
            background: #d32f2f;
        }

        .help-btn:active {
            transform: scale(0.98);
        }

        .help-btn.requested {
            background: #4caf50;
            cursor: not-allowed;
        }

        .help-btn.requested:hover {
            background: #43a047;
        }

        /* 紧急开锁按钮禁用状态 */
        .action-btn.emergency:disabled {
            background: #ccc;
            cursor: not-allowed;
            opacity: 0.7;
        }

        .action-btn.emergency.active {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
            }
        }

        /* 添加禁用按钮样式 */
        .action-btn.repair:disabled {
            background: #ccc;
            cursor: not-allowed;
            opacity: 0.7;
        }

        /* 禁用状态的按钮样式 */
        .gender-btn:disabled {
            cursor: not-allowed;
            background: #f5f5f5;
            border-color: #ddd;
            color: #999;
        }

        /* 禁用状态的开关样式 */
        .toggle-switch input:disabled + .toggle-slider {
            background-color: #ccc;
            cursor: not-allowed;
        }

        .toggle-switch input:disabled ~ .toggle-label {
            color: #999;
        }

        /* 维修状态按钮样式 */
        .maintenance-switch {
            display: flex;
            gap: 8px;
        }

        .maintenance-btn {
            padding: 6px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: white;
            color: #666;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 14px;
            transition: all 0.3s;
        }

        .maintenance-btn:hover {
            background: #f5f5f5;
        }

        .maintenance-btn.active {
            color: white;
        }

        .maintenance-btn[data-state="fault"].active {
            background: #f44336;
            border-color: #f44336;
        }

        .maintenance-btn[data-state="maintenance"].active {
            background: #2196F3;
            border-color: #2196F3;
        }

        .maintenance-btn[data-state="smoke"].active {
            background: #607D8B;
            border-color: #607D8B;
        }

        .maintenance-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: #f5f5f5;
        }

        /* 悬浮按钮样式 */
        .float-btn {
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 56px;
            height: 56px;
            border-radius: 28px;
            background: #2196F3;
            color: white;
            border: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            transition: all 0.3s;
            z-index: 1000;
        }

        .float-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        }

        .float-btn:active {
            transform: translateY(0);
        }

        /* 状态样式 */
        .status-occupied {
            color: #f44336;
            font-weight: bold;
        }

        .status-empty {
            color: #4CAF50;
            font-weight: bold;
        }

        .occupied {
            background-color: #ffebee;
        }

        .empty {
            background-color: #e8f5e9;
        }

        .stats-item {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            background: #f5f5f5;
            border-radius: 4px;
        }

        .stats-list {
            display: grid;
            gap: 10px;
        }

        .stats-item span:last-child {
            font-weight: 500;
            color: #2196F3;
        }

        .stats-item.warning span:last-child {
            color: #ff9800;
        }

        .stats-item.danger span:last-child {
            color: #f44336;
        }

        /* 结束使用按钮样式 */
        .end-use-btn {
            padding: 10px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s;
        }

        .end-use-btn:hover {
            background: #45a049;
        }

        .end-use-btn:active {
            transform: scale(0.98);
        }

        /* 按钮组样式 */
        .button-group {
            display: flex;
            gap: 10px;
            width: 100%;
        }

        .button-group .end-use-btn {
            flex: 2;  /* 结束使用按钮占更多空间 */
        }

        .button-group .help-btn {
            flex: 1;  /* 呼叫帮助按钮占较少空间 */
            justify-content: center;
        }

        /* AI 助手悬浮图标样式 */
        .ai-assistant {
            position: fixed;
            left: 20px;
            bottom: 20px;
            width: 50px;
            height: 50px;
            background: #2196F3;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .ai-assistant i {
            color: white;
            font-size: 24px;
        }

        .ai-assistant:hover {
            transform: scale(1.1);
            background: #1976D2;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

        .ai-assistant:active {
            transform: scale(0.95);
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="back-btn" onclick="history.back()">
            <i class="fas fa-arrow-left"></i>
        </div>
        <h1><span id="stallNumber"></span>号厕位</h1>
    </div>

    <div class="info-card">
        <div class="info-item">
            <span class="info-label">性别/状态</span>
            <span class="info-value">
                <span id="stallGender"></span> / 
                <span id="stallStatus"></span>
            </span>
        </div>
        <div class="info-item" id="endUseContainer">
            <div class="button-group">
                <button class="end-use-btn" onclick="endUse()">
                    <i class="fas fa-door-open"></i> 结束使用
                </button>
                <button class="help-btn" onclick="requestEmergencyHelp()">
                    <i class="fas fa-exclamation-circle"></i> 呼叫帮助
                </button>
            </div>
        </div>
        <div class="info-item">
            <span class="info-label">星闪模组ID</span>
            <span class="info-value" id="moduleId">-</span>
        </div>
        <div class="info-item">
            <span class="info-label">使用时长</span>
            <span class="info-value" id="useTime" style="font-family: monospace;">未使用</span>
        </div>
        <div class="info-item">
            <span class="info-label">温湿度</span>
            <span class="info-value">
                <span id="temperature">26°C</span> / 
                <span id="humidity">45%</span>
            </span>
        </div>
        <div class="info-item">
            <span class="info-label">厕纸剩余</span>
            <span class="info-value" id="paperStatus">中</span>
        </div>
        <div class="info-item">
            <span class="info-label">照明状态</span>
            <label class="toggle-switch">
                <input type="checkbox" id="lightToggle" onchange="toggleLight(this.checked)">
                <span class="toggle-slider"></span>
                <span class="toggle-label" id="lightLabel">开</span>
            </label>
        </div>
        <div class="info-item">
            <span class="info-label">烟雾浓度</span>
            <span class="info-value" id="smoke">正常</span>
        </div>
    </div>

    <!-- 管理员操作区 -->
    <div id="adminPanel" class="admin-panel" style="display: none;">
        <div class="info-card">
            <h3 class="admin-title">管理员操作</h3>
            
            <!-- 快捷操作按钮 -->
            <div class="admin-item">
                <span class="admin-label">快捷操作</span>
                <div class="quick-actions">
                    <button class="action-btn emergency" onclick="quickAction('emergency')">
                        <i class="fas fa-door-open"></i> 紧急开锁
                    </button>
                    <button class="action-btn repair" onclick="quickAction('repair')">
                        <i class="fas fa-tools"></i> 维修完毕
                    </button>
                </div>
            </div>

            <!-- 维修状态控制 -->
            <div class="admin-item">
                <span class="admin-label">维修状态</span>
                <div class="maintenance-switch">
                    <button class="maintenance-btn" data-state="fault" onclick="setMaintenanceState('fault')">
                        <i class="fas fa-exclamation-triangle"></i> 故障
                    </button>
                    <button class="maintenance-btn" data-state="maintenance" onclick="setMaintenanceState('maintenance')">
                        <i class="fas fa-tools"></i> 维修中
                    </button>
                    <button class="maintenance-btn" data-state="smoke" onclick="setMaintenanceState('smoke')">
                        <i class="fas fa-smoking"></i> 烟雾
                    </button>
                </div>
            </div>

            <!-- 原有的性别切换和启用/禁用控件 -->
            <div class="admin-item">
                <span class="admin-label">性别设置</span>
                <div class="gender-switch">
                    <button class="gender-btn male" onclick="changeGender('男')" id="maleBtn">
                        <i class="fas fa-male"></i> 男
                    </button>
                    <button class="gender-btn female" onclick="changeGender('女')" id="femaleBtn">
                        <i class="fas fa-female"></i> 女
                    </button>
                </div>
            </div>
            <div class="admin-item">
                <span class="admin-label">厕位状态</span>
                <label class="toggle-switch">
                    <input type="checkbox" id="enableToggle" onchange="toggleEnable(this.checked)">
                    <span class="toggle-slider"></span>
                    <span class="toggle-label" id="toggleLabel">启用</span>
                </label>
            </div>
        </div>
    </div>

    <!-- 添加悬浮按钮 -->
    <!-- <button id="addStallBtn" class="float-btn" onclick="goToAddStall()" style="display: none;">
        <i class="fas fa-plus"></i>
    </button> -->

    <!-- 添加 Toast 容器 -->
    <div id="toast" class="toast"></div>

    <!-- AI 助手悬浮图标 -->
    <div class="ai-assistant" onclick="openAIChat()">
        <i class="fas fa-robot"></i>
    </div>
    <script>
        function openAIChat() {
            // 从url参数中获取当前厕位并传递
            const urlParams = new URLSearchParams(window.location.search);
            const stallId = urlParams.get('stallId');
            // 在当前窗口打开
            window.location.href = `ai-chat.html?stallId=${stallId}`;
        }
    </script>

    <!-- 将脚本移到 body 末尾 -->
    <script src="js/stall-detail.js"></script>
    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            console.log('Page loaded, initializing...');
            initPage();
            // 启动自动刷新
            const refreshInterval = setInterval(() => {
                if (document.visibilityState === 'visible') {
                    initPage();
                }
            }, 1000);
        });

       
    </script>
</body>
</html> 